<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精选</title>
    <style type="text/css">
        body{font-size: 45px;}
        body>img:first-child{width: 100%;height: 62px;}
        div:nth-child(2){background-color: #ffd8b1;width: 100%;height: 100px;margin-top: -13px;font-weight: bold;text-align: center;position: relative;}
        div.naughty>span{margin: auto;display: inline-block;height: 100px;line-height: 100px;}
        div.naughty>img{width: 58px;height: 58px;position: absolute;right:19px;top:19px;}
        div:nth-child(3){width: 100%;height: 120px;}
        div:nth-child(3)>ul{list-style-type: none;padding: 0;width: 100%;height: 100%;margin: 0;}
        div:nth-child(3)>ul>li{float: left;width: 25%;text-align: center;height:60%;uotline:1px solid red;margin-top:24px;line-height: 72px;}
        div:nth-child(3)>ul>li:last-child{border-left:1px solid grey;width: 24.89%;}
        div:nth-child(3)>ul>li:last-child:after{clear: both;}
        img:nth-child(4){width: 100%;}
        div:nth-child(5){width: 100%;height: 160px;background-color: rgba(217, 217, 217, 0.51);margin-top: -11px;border:1px solid transparent;}
        div:nth-child(5)>div{font-size:35px;color:grey;width: 100%;height: 120px;margin-top: 20px;background-color: white;line-height: 120px;position: relative;}
        div:nth-child(5)>div>img:first-child{width:70px;height: 70px;position: absolute;left: 30px;top:27.5px;}
        div:nth-child(5)>div>img:last-child{width:30px;height: 68px;position: absolute;right: 30px;top:27.5px;}
        div:nth-child(5)>div>span{margin-left: 110px;font-size: 42px;color: black;margin-right: 30px;}
        div:nth-child(6)>{width: 100%;height: 935px;border:1px solid red;}
        div:nth-child(6)>div{width: 100%;height: 120px;line-height: 120px;}
        div:nth-child(6)>div>img:nth-child(2){width:30px;height: 68px;float: right;margin-right:30px;margin-top: 28px;}
        div:nth-child(6)>div>span:first-child{margin-left: 30px;}
        div:nth-child(6)>div>span:nth-child(3){float: right;margin-right: 20px;}
        div:nth-child(6)>div>span:nth-child(3)>a{text-decoration: none;color: grey;}
        div:nth-child(6)>span{display: inline-block;width: 30%;margin-left:2.5%;text-align: center;font-size: 40px;}
        div:nth-child(6)>span>img{width: 100%;}
        body>ul{background-color:white;list-style-type: none;padding: 0;margin: 0;border-top:1px solid #c8c8c8;position:fixed;bottom:0;width: 100%;}
        body>ul>li{float: left;width: 22%;margin-left: 2.4%;text-align: center;font-size: 28px;}
        p{margin: 11px 0;color: #696969;}
        body>ul>li>img{width: 65px;height: 65px;}
    </style>
</head>
<body>
    <img src="./images/精选_01.jpg">
    <div class="naughty"><span>精选</span><img src="images/精选_03.jpg"></div>
    <div>
        <ul>
            <li>女频</li>
            <li>男频</li>
            <li>出版</li>
            <li>免费</li>
        </ul>
    </div>
    <img src="./images/精选_07.jpg">
    <div><div><img src="./images/精选_10.jpg" ><span>私人书坊</span>为您量身定制，打造专属服务<img src="./images/精选_12.jpg"></div></div>
    <div>
        <div><span>重磅推荐</span><img src="./images/精选_12.jpg"><span><a href="#">更多</a></span></div>
        <span><img src="./images/精选_16.jpg"><p>凤倾天下</p></span><span><img src="./images/精选_18.jpg"><p>将军令</p></span><span><img src="./images/精选_20.jpg"><p>折桂令</p></span><br/>
        <span><img src="./images/精选_24.jpg"></span><span><img src="./images/精选_25.jpg"></span><span><img src="./images/精选_26.jpg"></span>
    </div>
    <ul>
        <li><img src="./images/精选_31.jpg"><br/>精选</li>
        <li><img src="./images/精选_33.jpg"><br/>书库</li>
        <li><img src="./images/精选_35.jpg"><br/>书架</li>
        <li><img src="./images/精选_37.jpg"><br/>我的</li>
    </ul>
</body>
</html>